<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2021-11-03 18:10:30
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2022-03-18 13:57:57
 * @Description:
-->
<template>
  <el-container>
    <el-main>
      <table-area>
        <template slot="body">
          <div ref="tableWrapper" class="table-wrapper">
            <el-table
              ref="table"
              v-loading="loading"
              :max-height="tableMaxHeight"
              border
              :data="data"
              :empty-text="emptyText"
              :tree-props="{ children: 'children' }"
              row-key="id"
              :cell-style="tableStyle.cellStyle"
            >
              <el-table-column
                v-for="(v, i) in tableConfig"
                :key="i"
                :label="v.label"
                :type="v.type "
                :property="v.property"
                :fixed="v.fixed"
                :width="v.w "
                align="center"
                :formatter="v.formatter "
                :column-key="v.property"
                :show-overflow-tooltip="v.overflow"
              >
                <template v-if="v.property === 'options'" #default="{ row }">
                  <OptionsMenu :data="row" :only-view="queryCondition.showRange!==0" @click="click($event,row)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <template slot="footer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :layout="layout"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </table-area>
    </el-main>
  </el-container>
</template>

<script>
import PaginationTable from '@/minxins/common/paginationTable';
import { tableConfig, } from '@/views/project/impose/table.config';
import { mapMutations, mapState, } from 'vuex';
import {
  mixins_base,
  mixins_project_index,
  mixins_task,
} from '@/minxins/project';
import ProjectAPI from '@/apis/project';
import HomeApi from '@/apis/home';
import tableStyle from '@/views/project/style/table';
import TableArea from '@/views/components/common/tableArea.vue';
import drawerWidth from '@/views/project/common/width/drawer';
import dialogWidth from '@/views/project/common/width/dialog';

export default {
  components: {

    // eslint-disable-next-line vue/no-unused-components
    HandleTable: () => import('@/views/project/impose/components/handleTable.vue'),
    // eslint-disable-next-line vue/no-unused-components
    Research: () => import('@/views/project/components/panelsGroup/research.vue'),
    // eslint-disable-next-line vue/no-unused-components
    ChangeApplication: () => import('@/views/project/impose/components/changeDialog.vue'),
    // eslint-disable-next-line vue/no-unused-components
    Application: () => import('@/views/project/impose/components/application.vue'),
    // eslint-disable-next-line vue/no-unused-components
    ItemSet: () => import('@/views/project/components/panelsGroup/itemSet.vue'),
    OptionsMenu: () => import('@/views/project/impose/components/optionsMenu.vue'),
    // eslint-disable-next-line vue/no-unused-components
    EditLookOrder: () => import ('@/views/project/components/panelsGroup/reviewPlan.vue'),
    TableArea,
  },
  mixins: [PaginationTable, mixins_base, mixins_project_index, mixins_task],
  props: {
    queryData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      btnText: '切换甘特图',
      tableStyle,
      loading: false,
      tableConfig,
      result: {},
      componentName: 'TaskTable',
      dialogParams: {
        visible: false,
        title: '需求信息',
        nameCode: '',
        hiddenSaveButton: true,
      },
      width: 'auto',
      SW: {
        keyWord: '',
        W: {
          code: '',
        },
        N: 10,
        P: 1,
      },
      listApi: HomeApi.projectList,
      panelArguments: {
        ItemSet: {
          width: drawerWidth.small_px,
          item_program_review: {
            width: drawerWidth.small_px,
          },
          program_review_reject: {
            width: drawerWidth.small_px,
          },
          implement_start: {
            width: drawerWidth.small_px,
          },
          implement_over: {
            width: drawerWidth.small_px,
          },
          item_before_project: {
            width: drawerWidth.small_px,
          },
          end_project: {
            width: drawerWidth.small_px,
          },
          props: {
            title: '项目信息',
            hiddenSaveButton: true,
            showFooter: true,
          },
        },
        EditLookOrder: {
          width: drawerWidth.larger_pr,
          item_program_review: {
            width: drawerWidth.larger_pr,
          },
          item_before_project: {
            width: drawerWidth.larger_pr,
          },
          implement_over: {
            width: drawerWidth.larger_pr,
          },
          props: {
            title: '评审',
            hiddenSaveButton: true,
            showFooter: true,
          },
        },
      },
    };
  },
  computed: {
    ...mapState('project/index', ['imposeOptionsVisibles']),
    ...mapState('login', ['userInfo']),

  },
  watch: {
    queryData: {
      handler(newVal) {
        this.queryCondition.startTime = newVal.dateRange[0];
        this.queryCondition.endTime = newVal.dateRange[1];
        this.queryCondition.sendUser = newVal.sendUser?.join(',');
        this.queryCondition.waitWork = newVal.waitWork;
        this.queryCondition.showRange = newVal.showRange;
        this.fetchData();
      },
      deep: true,
    },
  },

  async created() {
    this.queryCondition.startTime = this.queryData.dateRange[0];
    this.queryCondition.endTime = this.queryData.dateRange[1];
    this.queryCondition.sendUser = this.queryData.sendUser?.join(',');
    this.queryCondition.waitWork = this.queryData.waitWork;
    this.queryCondition.showRange = this.queryData.showRange;
    this.queryCondition.pageNum = this.currentPage;
    this.queryCondition.pageSize = this.pageSize;
    this.fetchData();
  },

  methods: {
    ...mapMutations('project/index', ['SET_CONFIRM_REVIEW']),
    onDrawerDone() {
      this.$emit('update');
      this.fetchData();
    },
    async click(type, r) {
      this.SET_ITEM_CODE(r.itemCode);
      let loading = null;

      switch (type) {
        case 'searh':
          try {
            loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            });
            this.SET_LOOK_TASK(true);
            await this.FETCH_PANEL_DATA(await ProjectAPI.setUp.reviewInfo(r.itemCode));
            this.SET_ITEM_CODE(r.itemCode);
            this.SET_RESEARCH_INFO(r);
            this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: true, });
            this.SET_PANCEL_DISABLED({ name: 'researchViewPlan', disabled: true, });
            this.SET_PANCEL_DISABLED({ name: 'projectInfo', disabled: true, });
            this.SET_PANCEL_DISABLED({ name: 'researchInfo', disabled: true, });
            this.panelArguments['ItemSet'].props.showFooter = false;
            if (this.getterPanelGroupData.demand) {
              this.panelArguments['ItemSet'].width = drawerWidth.larger_pr;
            } else {
              this.panelArguments['ItemSet'].width = drawerWidth.small_px;
            }
            this.renderPanelFn('ItemSet', this.panelArguments['ItemSet'].width, this.panelArguments['ItemSet'].props);
          } catch (error) {
            loading.close();
          } finally {
            loading.close();
          }
          break;
        case 'handle':
          this.SET_LOOK_TASK(false);
          this.SET_RESEARCH_INFO(r);
          this.renderPanelFn('HandleTable', '80%', { handleTitle: '处理', });
          break;
        case 'change':
          this.SET_PERVIEW(false);
          this.SET_RESEARCH_INFO(r);
          this.$dialog({
            title: '变更申请',
            width: dialogWidth.mini_px,
            position: 'center',
            component: () => <ChangeApplication onDone={this.onDrawerDone}/>,
          });
          break;
        case 'confirm':
          this.SET_RESEARCH_INFO({ ...r, });
          this.SET_LOOK_TASK(false);
          this.renderPanelFn('HandleTable', '80%', { handleTitle: '确认', });

          break;
        case 'confirmResult':
          try {
            loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)',
            });
            await this.FETCEH_RESET_PANCEL_DISABLED_OPTIONS();
            await this.FETCH_PANEL_DATA(await ProjectAPI.setUp.reviewInfo(r.itemCode));
            this.SET_RESEARCH_INFO({ ...r, });
            this.SET_ITEM_CODE(r.itemCode);
            this.SET_CONFIRM_REVIEW('confirm');
            this.SET_PANCEL_DISABLED({ name: 'needInfo', disabled: true, });
            this.SET_PANCEL_DISABLED({ name: 'projectInfo', disabled: true, });
            this.SET_PANCEL_DISABLED({ name: 'researchInfo', disabled: true, });
            this.panelArguments['EditLookOrder'].props.title = '确认结果';
            this.panelArguments['EditLookOrder'].props.showFooter = true;
            this.renderPanelFn('EditLookOrder',
              this.getterPanelGroupData.demand ? drawerWidth.larger_pr : this.panelArguments['EditLookOrder'][r.showState].width,
              this.panelArguments['EditLookOrder'].props
            );
          } catch (error) {
            loading.close();
          } finally {
            loading.close();
          }
          break;
      }
    },

    /**
     * 渲染各种面板
     */
    renderPanelFn(componentName, width, props) {
      const self = this;
      this.$drawer({
        width: width,
        component: () => {
          return self.$createElement(componentName, {
            props: props,
            on: {
              done: () => {
                self.onDrawerDone();
              },
            },
          });
        },
      });
    },
    /**
     * 结果确认
     */
    async clickConfirmResult() {
      await ProjectAPI.impose.confirmResult(this.itemCode);
      this.$message.success('提交成功');
      this.dialogParams.visible = false;
    },

  },
};
</script>

<style lang="scss" scoped>

</style>
